<template>
  <div id="fullscreen" ref="sgMap" class="map">
    <!-- 地图插入 -->
    <div id="sijiMapWrap" />

    <div v-show="isToCity" class="fixed-view">
      <el-button type="primary" @click="backProvince">返回上级</el-button>
    </div>

    <div class="fullscreen-fa zindex">
      <!-- <svg-icon
        v-show="fullscreenshow"
        icon-class="fullscreen"
        class="fullscreen"
        @click="fullScreen()"
      />
      <svg-icon
        v-show="!fullscreenshow"
        icon-class="exit-fullscreen"
        class="fullscreen"
        @click="exitFullscreen()"
      /> -->
    </div>
  </div>
</template>

<script>
var map, gridLayer
import {
  SG_MAP_KEY,
  SG_MAP_SECRET,
  SG_MAP_KEY_TEST,
  SG_MAP_SECRET_TEST,
  BASE_SG_URL,
  GIS_MAP_SECRET_KEY,
  GIS_MAP_APP_KEY,
  GIS_SERVICE_URL,
} from '../constant/index'

import { post, get } from '../util/httpService.js'
import province from '../util/province'
import cityList from '../util/cityList'
import { mapState } from 'vuex'
// import {
//   areaAndNumber,
//   transByLineId,
//   allCityEchartsINfo,
//   getCityNoByOrgNo,
// } from '../../../../api/blackoutControl'
// import eventBus from '../util/eventbus'

// import mapWithLineLegend from './mapWithLineLegend.vue'
// import faultPointLegend from './faultPointLegend.vue'
// import mapType from './mapType.vue'
// import faultCardList from './faultCardList.vue'
export default {
  name: 'SgMapInit',
  components: {},
  data() {
    return {
      msFlag: false, // 微服务登录标识
      sgMapFlag: false, // 思极地图登录标识
      popupDOM: null,
      fullscreenshow: true,
      center: [112.398572, 31.284355],
      zoom: '6',
      faultPointImg: '', // 故障点图片
      normalTransformerImg: '', //
      importantFaultPointImg: '', //
      areaList: [], // 故障点
      displayFilter: [], // 单线图请求过滤条件
      layers: [], // 单线图显示的图层
      gisMapToken: '', // 微服务请求服务token
      psrId: '10461',
      drawedAreaLayersList: [], // 已绘制区域id集合
      areaMarkerList: [], // 已绘制区域面上的marker点集合
      isToCity: false, // 是否点击到市级
      provinceCenter: [113.03490328329713, 30.98767850650235], // 省级显示中心
      // gridLayer:undefined, // 单线图图层
      tokenTimer: null,
      currentCityNo: '',
      isShow: 'is',
      areaDataInfo: [],
    }
  },
  computed: {
    ...mapState(['login']),
  },
  watch: {},
  created() {},
  mounted() {
    this.loadPowerGrid_microService()

    this.tokenTimer = setInterval(() => {
      this.msLogin(true)
    }, 10 * 60 * 1000)

    window.onresize = () => {
      if (!this.checkFull()) {
        // 退出全屏后要执行的动作
        console.log('退出全屏')
        this.fullscreenshow = true
      }
    }
  },
  methods: {
    checkFull() {
      // 判断浏览器是否处于全屏状态 （需要考虑兼容问题）
      // 火狐浏览器
      var isFull =
        document.mozFullScreen ||
        document.fullScreen ||
        // 谷歌浏览器及Webkit内核浏览器
        document.webkitIsFullScreen ||
        document.webkitRequestFullScreen ||
        document.mozRequestFullScreen ||
        document.msFullscreenEnabled
      if (isFull === undefined) {
        isFull = false
      }
      return isFull
    },

    //  初始化思极地图
    initMap() {
      // TODO后续优化给提示 message.err()
      // if (!this.msFlag || !this.sgMapFlag) {
      //   return
      // }
      console.log('地图初始化-----')
      map = egisV2.createMap({
        container: 'sijiMapWrap',
        style: 'aegis://styles/aegis/Streets',
        // doubleClickZoom: true,
        zoom: 6.5,
        preserveDrawingBuffer: true,
        maxZoom: 23.5,
        center: this.provinceCenter,
        localIdeographFontFamily: 'Microsoft YoHei',
      })
      console.log('初始化方法走完===', map)

      // map.scrollZoom.setWheelZoomRate(1)
      map.egis.selectionSet.setSpeed(5)
      map.on('load', (e) => {
        if (!map.style.stylesheet.glyphs) {
          map.style.stylesheet.glyphs =
            'aegis://fonts/aegis/{fontstack}/{range}.pbf'
          map.style.glyphManager.setURL(
            'aegis://fonts/aegis/{fontstack}/{range}.pbf'
          )
        }

        new SGMap.EleSymbolLayer({ mobile: true, type: 'all' }) // 加载电网图数据
        map.addControl(
          new SGMap.ScaleControl({
            maxWidth: 80,
            unit: 'metric',
          }),
          'bottom-left'
        )
        // const { orgId } = this.login.userInfo.userId

        const areaCenter1 = ['113.03490328329713', '30.98767850650235']
        this.drawArea(null, areaCenter1, 6.5)
      })
      // 这里是地图点击的测试代码
      map.on('click', function (e) {
        // var features = map.queryRenderedFeatures(e.point)
        // console.log(e.lngLat);
        // console.log(features);
      })
      //
      // map.on('zoomend', function (e) {
      //   console.log('比例尺:  1/', map.getScale())
      //   console.log('层级:', map.getZoom())
      // })
    },

    //  微服务登录
    msLogin(isRepeat) {
      post(GIS_SERVICE_URL + '/authorityservice/login/integrate', {
        appkey: GIS_MAP_APP_KEY,
      }).then(
        (res) => {
          if (res.data.success) {
            console.log('微服务登录成功', res)
            // step-3:配置sdk对接微服务的参数
            // 设置微服务出图参数是否全报文加密(设置true和false都可以，默认是false)
            // egisV2.MicroService.serviceInfo.encMode = false//这个是给sdk请求vecformat接口用的参数，vecformat为共享服务，现场无需使用全报文加密
            // 设置微服务的token
            egisV2.MicroService.serviceInfo.token = res.data.resultValue.token
            // 请求微服务的token 后续请求接口带参在headers
            this.gisMapToken = res.data.resultValue.token
            // 设置微服务的secretKey
            egisV2.MicroService.serviceInfo.secretKey = GIS_MAP_SECRET_KEY
            this.msFlag = true
            if (!isRepeat) {
              this.initMap()
            }
          } else {
            console.log(res.data.message)
          }
        },
        (err) => {
          console.log('微服务认证失败')
        }
      )
      // .catch(e => {
      //     console.log('微服务异常')
      // })
    },

    // 初始化电网图层
    initGridLayer(displaySchemaData) {
      console.log('initGridLayer--start----')
      // 这个data参数中的各个属性与电网SDK的FeaturesLayer中的相关参数是一致的（即栅格服务的出图参数）
      gridLayer = new egisV2.layer.GridVectorLayer({
        map, // 思极地图的map对象实例
        url: GIS_SERVICE_URL + '/mapservice/mapexport/vecformat', // 栅格出图服务地址
        method: 'POST',
        data: {
          layers: this.layers.join(','), // 要显示的图层
          displayfilter: this.displayFilter, // 这个参数可以使用数组格式，如[{'300000':'dydj = 3'}],也可以将数组格式的数据通过JSON.stringify转成字符串，sdk这里有做兼容处理。
          mapid: 110,
          maptype: 1001,
          FILTERFLYLINE: 1, // 是否过滤飞线
          FLYLINELENGTH: 2500 * 10, // 判定为飞线的最小距离
          disschema: 1,
        },
      })
      console.log('initGridLayer--render----', gridLayer)
      const configData = {}
      displaySchemaData.forEach((item) => {
        configData[item.line] = {}
        item.tranNos.forEach((subItem) => {
          configData[item.line][subItem.oidListStr] = {
            color: '#04A18F',
            size: 12,
          }
        })
      })
      console.log('configData----', configData)
      const displaySchema = new egisV2.support.DisplaySchema({
        globe: {
          color: '#cd211d',
          exclude: configData,
        },
        configData,
      })
      gridLayer.setDisplaySchema(displaySchema)
      gridLayer.render()

      //   let startTime = new Date().getTime();
      //   this.gridLayer.on("startLoadingData", (e) => {
      //     startTime = new Date().getTime();
      //     setInfoBarData("ib_gridTime", "加载中");
      //   });
      //   this.gridLayer.on("endLoadingData", (e) => {
      //     let during = new Date().getTime() - startTime;
      //     setInfoBarData("ib_gridTime", Number(during / 1000).toFixed(2) + "秒");
      //   });

      // 渲染前
      // gridLayer.on(
      //   egisV2.event.GridVectorLayerEvent.BEFORE_RENDER,
      //   (e) => {
      //     console.log('渲染内容----', e)
      //     //每次请求到的电网数据可以在这里获取并供业务层使用
      //     //完成之后调用该方法执行渲染（即用户可以在渲染前随意修改数据）
      //     //渲染前调可以自行增删改数据
      //     // e.keys.splice(e.keys.indexOf('301000'),1)
      //     // e.keys.splice(e.keys.indexOf('301000_extend'),1)
      //     // delete e.data['301000']
      //     // delete e.data['301000_extend']
      //     //请勿再次事件的回调方法内调用gridVectorLayer的render方法，这么做会导致循环调用
      //     console.log('渲染开始:' + new Date().getTime())
      //   }
      // )

      // gridLayer.on(egisV2.event.GridVectorLayerEvent.HANDLE_DEV, (dev) => {
      //   //请勿再次事件的回调方法内调用gridVectorLayer的render方法，这么做会导致循环调用
      //   //每个电网设备在叠加本地设备缓存之后，渲染之前会触发该回调，业务层可以在这里对属性进行对应判断，例如检测到了批次号就可以删除本地缓存
      //   // console.log(dev)
      // })

      // //渲染后
      // gridLayer.on(egisV2.event.GridVectorLayerEvent.AFTER_RENDER, () => {
      //   console.log('渲染结束:' + new Date().getTime())
      // })
      // //渲染出错
      // gridLayer.on(
      //   egisV2.event.GridVectorLayerEvent.ERROR_RENDER,
      //   (err) => {
      //     console.log('渲染出错:' + new Date().getTime())
      //   }
      // )
    },

    //  通过微服务加载电网图（现场适用）
    loadPowerGrid_microService(callback) {
      const _this = this
      console.log('loadPowerGrid_microService---')
      egisV2.MicroService.active = true
      // 思极地图鉴权
      SGMap.tokenTask
        .login(SG_MAP_KEY_TEST, SG_MAP_SECRET_TEST)
        .then(function () {
          //, "SGMap.RoadNetLayer" 暂不支持这个插件
          SGMap.plugin(['SGMap.EleSymbolLayer']).then(function (res) {
            _this.sgMapFlag = true
            // 调试地图用，不用使用微服务登录
            _this.initMap()
            // 获取微服务信息
            // _this.msLogin()
          })
        })
    },

    //  初始化网格图层
    initCellLayer() {
      this.cellLayer = new egisV2.layer.GridCellLayer({
        map,
        bounds: [
          [118.18995135082379, 24.47834215450987],
          [118.19061021844635, 24.478524030580136],
        ],
        lineColor: '#fff',
        lineWidth: 1,
        lineOpacity: 0.3,
        backgroundColor: '#000000',
        backgroundOpacity: 1,
        cellSize: 1, // 单元格尺寸1代表实际跨度为0.000009度
      })
      this.cellLayer.setVisible(false)
      this.cellLayer.render()

      // snapTool.addGridCell(cellLayer)
    },

    // 全屏封装
    fullScreen() {
      // 全屏
      var full = document.getElementById('fullscreen')
      this.launchIntoFullscreen(full)
      this.fullscreenshow = false
    },

    // 退出全屏封装
    exitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.fullscreenElement) {
        document.exitFullscreen()
      } else if (element.msExitFullscreen) {
        element.msExitFullscreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen()
      }
      this.fullscreenshow = true
      this.zoom = '6'
      // this.popupDOM.remove()
      this.popupDOM = null
    },

    launchIntoFullscreen(element) {
      if (element.requestFullscreen) {
        element.requestFullscreen()
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen()
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen()
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen()
      }
    },

    drawArea(attCode, areaCenter, zoom = 6.5) {
      console.log('attCode, areaCenter, zoom', attCode, areaCenter)
      // 地区Code值，不传默认湖北省
      // let areaDataInfo = []
      // 通过区域的code值去判断渲染的区域经纬度
      if (attCode) {
        debugger
        console.log('cityList', cityList)

        this.areaDataInfo = cityList.find((item) => {
          console.log(
            'item',
            item.features[0].properties.parent.adcode,
            attCode
          )

          const { adcode } = item.features[0].properties.parent
          if (item.features[0].properties.parent.adcode === attCode) return item

          // if (adcode === 420000) {
          //   return item.features[0].properties.adcode === attCode
          // }
          // return item.features[0].properties.parent.adcode === attCode
        })

        console.log('this.areaDataInfo', this.areaDataInfo)

        province.features.forEach((item) => {
          if (item.properties.adcode === attCode) {
            areaCenter = item.properties.center
          }
        })
        zoom = 8
      } else {
        this.areaDataInfo = province
        console.log('attCode', attCode, this.areaDataInfo)
      }
      //  如果没有该区域对象不渲染
      if (!this.areaDataInfo || !Object.keys(this.areaDataInfo).length) {
        return
      }

      // console.log('areaDataInfo--', this.areaDataInfo)
      // 判断当前页面有没有已绘制区域 如果有的话先清除之前图层再画
      this.clearAllLayers()
      this.areaDataInfo.features.forEach((item) => {
        const { properties, geometry } = item
        const layerId = properties.level + properties.adcode
        this.drawedAreaLayersList.push(layerId)
        // 画面
        map.addLayer({
          id: layerId,
          type: 'fill',
          source: {
            type: 'geojson',
            data: {
              type: 'FeatureCollection',
              features: [
                {
                  type: 'Feature',
                  geometry: {
                    type: 'Polygon',
                    coordinates: geometry.coordinates[0], // 三层数组[[0,0],[0,0]]
                  },
                  properties,
                },
              ],
            },
          },
          paint: {
            'fill-color': '#4FA8A4 ',
            'fill-opacity': 0.9,
            'fill-antialias': true,
            'fill-outline-color': '#fff',
            // 后续添加边框属性
          },
        })

        // 创建区域提示marker
        var areaTipEl = document.createElement('div')
        areaTipEl.innerHTML = this.getAreaTipContent(
          properties.name,
          properties.adcode
        )

        var areaMarker = new SGMap.Marker(areaTipEl, {
          anchor: 'center',
        })
        this.areaMarkerList.push(areaMarker)
        areaMarker.setLngLat(properties.center).addTo(map)

        if (!this.isToCity && !this.currentCityNo) {
          // 点击对应区域展示详情
          map.on('click', layerId, (e) => {
            var features = map.queryRenderedFeatures(e.point)
            const specialProvinceCodeList = [429006, 429005, 429004]
            console.log('点击对应区域展示详情', features)

            const { adcode, center } = features[0].properties
            if (
              specialProvinceCodeList.includes(adcode) ||
              adcode.indexOf('adcode') >= 0
            ) {
              return
            }
            // eventBus.$emit('changeCurrentArea', adcode)
            // const centerArr = JSON.parse(center)
            // console.log(centerArr)
            // this.getAreaAndNumber(adcode, centerArr, 8)
            const attCode = '62F1D16638414148AFAD6AAA47154C9A'
            const areaCenter = ['112.144146', '32.042426']
            this.drawArea(attCode, areaCenter)
            this.isToCity = true
          })
        }
      })

      console.log('areaCenter', areaCenter, 'zoom', zoom)
      // 判断是否要显示到页面中心
      if (areaCenter && areaCenter.length) {
        map.flyTo({
          center: areaCenter,
          zoom,
        })
      }
    },

    // 清除页面所有的marker点和图层
    clearAllLayers() {
      if (this.drawedAreaLayersList.length) {
        this.drawedAreaLayersList.forEach((item) => {
          if (map.getLayer(item)) {
            map.removeLayer(item)
            map.removeSource(item)
          }
        })
        if (this.areaMarkerList.length) {
          this.areaMarkerList.forEach((item) => {
            item.remove()
          })
        }
      }
    },

    // 获取区域提示的显示文字
    getAreaTipContent(cityName) {
      // let filterArr = ['仙桃市', '潜江市', '天门市']
      const currentCityCount = this.areaList.find((item) => {
        if (item.cityName) {
          return item.cityName.indexOf(cityName.substring(0, 2)) >= 0
        }
        if (item.countyName) {
          return item.countyName.indexOf(cityName.substring(0, 2)) >= 0
        }
      })?.count
      // if (filterArr.includes(cityName)) {
      // currentCityCount = 0
      // }
      const Img = require('@/assets/tdyp/error-small.png')
      return `<div>
                    <div style="font-size:10px;color:#ffffff;">${cityName}</div>
                    <div style="display:flex;align-items: center;font-size:14px;color:#ffffff;">
                        <img src="${Img}" style="margin-right:5px;" />
                        <span>${
                          currentCityCount ??
                          Math.floor(Math.random(0, 1) * 500)
                        }</span>
                    </div>
               </div>`
    },

    // 跳转到省级显示
    backProvince() {
      this.areaList = []
      // this.getAreaAndNumber(this.currentCityNo)
      const areaCenter1 = ['113.03490328329713', '30.98767850650235']
      this.drawArea(null, areaCenter1)
      this.isToCity = false
      // eventBus.$emit('changeCurrentArea', this.currentCityNo)
      if (gridLayer) {
        gridLayer.setVisible(false)
      }
    },

    // 获取城市故障点
    async getAreaAndNumber(cityNo = '', centerArr, zoom) {
      this.areaList = res.data
      // 三个市数据统筹在荆州下
      // const concatCityList = ['天门市', '仙桃市', '潜江市']
      // 调取城市的故障事件信息
      // areaAndNumber({ cityNo: cityNo.toString() })
      //   .then((res) => {
      //     if (res.status === 1000) {
      //       console.log('获取城市故障点', res)
      //       // 声明荆州的单独信息
      //       const jzData = {
      //         cityNo: 'BD69707EA19E4FED85C595AFB5D06720', // 荆州的cityNo
      //         dateType: '', // 查全部传空
      //         outageFlag: '', // 查全部传空
      //       }
      //       allCityEchartsINfo(jzData).then((jzRes) => {
      //         if (jzRes.status !== 1000) {
      //           return this.$message.error(jzRes.message)
      //         }
      //         let specialList // 声明特殊三个市的信息
      //         if (!cityNo) {
      //           // 如果查全省数据走这边
      //           // 过滤出三个市的数据拼接在后面
      //           specialList = jzRes.data
      //             .filter((item) => concatCityList.includes(item.countyName))
      //             .map((item) => {
      //               return {
      //                 count: item.powerSum,
      //                 cityName: item.countyName,
      //               }
      //             })
      //         } else if (cityNo === 'BD69707EA19E4FED85C595AFB5D06720') {
      //           // 单独获取荆州的底下数据
      //           specialList = jzRes.data
      //             .filter((item) => concatCityList.includes(item.countyName))
      //             .map((item) => {
      //               return {
      //                 count: item.powerSum,
      //                 countyName: item.countyName,
      //               }
      //             })
      //         }
      //         if (res.data && res.data.length && !cityNo) {
      //           this.areaList = [...res.data, ...specialList]
      //         } else if (
      //           res.data &&
      //           res.data.length &&
      //           cityNo === 'BD69707EA19E4FED85C595AFB5D06720' &&
      //           !this.currentCityNo
      //         ) {
      //           this.areaList = [...res.data, ...specialList]
      //           this.isToCity = true
      //         } else if (
      //           res.data &&
      //           res.data.length &&
      //           cityNo &&
      //           this.currentCityNo
      //         ) {
      //           this.areaList = res.data
      //           this.isToCity = false
      //         } else if (
      //           res.data &&
      //           res.data.length &&
      //           cityNo &&
      //           !this.currentCityNo
      //         ) {
      //           this.areaList = res.data
      //           this.isToCity = true
      //         }
      //         if (!cityNo && !this.currentCityNo) {
      //           this.drawArea(null, this.provinceCenter, 6.5)
      //         } else {
      //           this.drawArea(cityNo, centerArr, zoom)
      //         }
      //       })
      //     }
      //   })
      //   .catch((err) => {
      //     this.$message.error('数据加载中，请稍后')
      //   })
    },

    async drawAllLine1(psrId) {
      // psrId为对应线路馈线id
      if (gridLayer) {
        gridLayer.setVisible(false)
      }
      if (!psrId) {
        return this.$message.error('暂无馈线id')
      }
      // 请求对应馈线下面的包含设备集合
      const containsRes = await get(
        GIS_SERVICE_URL + '/queryservice/psrquery/line/' + psrId + '/contains',
        { token: this.gisMapToken }
      )
      console.log('containsRes=====', containsRes)
      // 如果调取微服务接口报错或者馈线下无设备提示
      if (
        !containsRes.data.success &&
        !containsRes.data.resultValue.featureAttributes.length
      ) {
        return this.$message.error('该馈线下暂无设备')
      }
      this.clearAllLayers()
      // 解构获取线路线所有设备信息并处理接口调取后台线路已故障设备接口  对比获取故障设备及图层渲染故障设备
      const { featureAttributes } = containsRes.data.resultValue
      // 处理调取馈线故障设备数据
      const queryLineEquipList = featureAttributes.map((item) => {
        let oidListStr = ''
        let deviceListStr = ''
        if (item.feature.length) {
          oidListStr = item.feature.map((subItem) => subItem.oid).join(',')
          deviceListStr = item.feature.map((subItem) => subItem.sbid).join(',')
        }
        return {
          layerId: item.layerID,
          oidListStr,
          deviceListStr,
        }
      })

      console.log('queryLineEquipList----', queryLineEquipList)
      const queryLineData = {
        lineId: psrId,
        lineDTOS: queryLineEquipList,
      }
      // 调取根据馈线获取该馈线下故障设备接口
      const filterEquipRes = await transByLineId(queryLineData)
      if (filterEquipRes.status !== 1000 || !filterEquipRes.data.length) {
        return this.$message.error('该线路下暂无故障设备')
      }
      console.log('filterEquipRes=====', filterEquipRes)
      const faultEquipLngRes = await get(
        GIS_SERVICE_URL +
          '/queryservice/psrquery/object/' +
          filterEquipRes.data[0].line +
          '/' +
          filterEquipRes.data[0].tranNos[0].oidListStr +
          '?cstype=lonlat',
        { token: this.gisMapToken }
      )
      if (
        !faultEquipLngRes.data.resultValue.featureAttributes &&
        !faultEquipLngRes.data.resultValue.featureAttributes.length
      ) {
        return this.$message.error('该线路下暂无故障设备')
      }
      const { feature } = faultEquipLngRes.data.resultValue.featureAttributes[0]
      const { coordinates } = JSON.parse(feature[0].shape)
      console.log('coordinates---', coordinates)
      this.fullScreen()
      map.flyTo({
        center: coordinates[0],
        zoom: 15,
      })
      this.isToCity = true
      // 获取到设备以后再加载单线图
      const layerFilterRes = await get(
        GIS_SERVICE_URL + '/queryservice/psrquery/findLineEquip?psrid=' + psrId, // 后续获取真实id替换
        { token: this.gisMapToken }
      )
      console.log('layerFilterRes====', layerFilterRes)
      this.layers = Object.keys(layerFilterRes.data.resultValue)
      // 遍历设备对应图层及oid对应关系
      this.displayFilter = Object.entries(layerFilterRes.data.resultValue).map(
        (item) => {
          const obj = {}
          obj[item[0]] = 'oid in ' + '(' + item[1] + ')'
          return obj
        }
      )
      this.initGridLayer(filterEquipRes.data)
    },
  },
  beforeDestroy() {
    if (this.tokenTimer) {
      clearInterval(this.tokenTimer)
    }
  },
}
</script>

<style lang="scss" scoped>
.map {
  width: 80%;
  height: calc(80% - 16px);
  position: relative;
}
#sijiMapWrap {
  width: 100%;
  height: 100%;
  position: relative;
}
.fixed-view {
  position: absolute;
  top: 30px;
  left: 30px;
  display: flex;
  align-items: center;
  ::v-deep .el-select:nth-child(2) {
    margin-left: 10px;
    width: 150px;
  }
  ::v-deep .el-select:nth-child(2) {
    margin-left: 10px;
    width: 190px;
  }
}
.legend {
  width: 100px;
  height: 50px;
  position: absolute;
  bottom: 40px;
  left: 40px;
  background: rgb(255, 255, 255);
  border-radius: 5px;
  font-size: 12px;
}
.legend > div:first-child {
  margin-top: 5px;
  margin-left: 5px;
}
.legend > div:last-child {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
// .legendRight {
//   width: 250px;
//   height: 90px;
//   background: #ffffff;
//   border-radius: 8px;
//   position: absolute;
//   top: 40px;
//   right: 160px;
// }
.legendStyle {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.legendStyle > div {
  font-size: 12px;
  margin-left: 5px;
}
.norLine {
  width: 60px;
  height: 15px;
  border-radius: 2px;
  border-bottom: 4px solid #520cc5;
}
.faultLine {
  width: 60px;
  height: 15px;
  border-radius: 2px;
  border-bottom: 4px solid #cd211d;
}
.impLine {
  width: 60px;
  border-radius: 2px;
  height: 15px;
  border-bottom: 4px solid #ff0000;
}
.mapType {
  position: absolute;
  bottom: 40px;
  right: 60px;
  span {
    margin-right: 10px;
  }
}
.mapType > span > img {
  width: 120px;
  height: 77px;
}
.zindex {
  z-index: 1000;
}
.public > span {
  color: #0c8882;
}
.fullscreen {
  display: inline-block;
  width: 25px !important;
  height: 25px !important;
  color: rgb(152, 138, 138);
  margin-right: 10px;
}

.fullscreen-fa {
  position: absolute;
  top: 20px;
  right: 20px;
  margin-top: 15px;
  display: flex;
}
.dialog ::v-deep .el-pagination {
  width: 203px;
  height: 28px;
  background-color: wheat;
}
::v-deep .sgmap-popup-content {
  width: 300px;
  z-index: 1000000000;
}
.dialog {
  margin: 15px 0 0 0;
  padding: 0 0 0 5px;
  position: absolute;
  top: 40%;
  left: 55%;
  font-size: 12px;
  // background-color: white;
}
.SensitiveUsers {
  color: red;
  float: right;
}
.dialogInfo > div::before {
  content: '';
  display: block;
}
.dialogInfo > div {
  margin-top: 11px;
  margin-left: 7px;
}
.dialogInfo > div > span:first-child {
  display: inline-block;
  width: 110px;
  font-weight: 400;
  /* margin-right: 25px; */
}
.dialogInfo > div > span:last-child {
  font-weight: 600;
  text-align: center;
}
.public > span {
  color: #0c8882;
}
.button {
  position: absolute;
  top: 30px;
  right: 80px;
  z-index: 10000;
}
</style>
